<template>
  <div class="detail-wrapper">
    <router-link tag="span" to="/store/2/" class="iconfont back-icon">
      &#xe697;
    </router-link>
    <img class="avatar" :src="detailFood.image">
    <div class="header border-bottom">
      <h3 class="title name">{{detailFood.name}}</h3>
      <div class="info-wrapper">
        <span class="count">月售{{detailFood.sellCount}}</span>
        <span class="rate">好评率{{detailFood.rating}}%</span>
      </div>
      <div class="price">
        <p class="new-price">
          ￥<span class="money">{{detailFood.price}}</span>
        </p>
        <p class="old-price" v-if="detailFood.oldPrice">
          ￥<span class="money">{{detailFood.oldPrice}}</span>
        </p>
      </div>
      <div class="shop">加入购物车</div>
    </div>
    <div class="devide"></div>
    <div class="seller-desc border-bottom" v-if="detailFood.description">
      <h3 class="title">商品介绍</h3>
      <p class="description">{{detailFood.description}}</p>
    </div>
    <div class="devide" v-if="detailFood.description"></div>
    <div class="rate border-bottom">
      <h3 class="title">商品评价</h3>
      <div class="rate-type">
        <div class="type-item all">
          全部<span class="num">{{allNum}}</span>
        </div>
        <div class="type-item good">
          推荐<span class="num">{{goodNum}}</span>
        </div>
        <div class="type-item bad">
          吐槽<span class="num">{{badNum}}</span>
        </div>
      </div>
    </div>
    <ul class="ratings">
      <li class="rating-item border-bottom"
        v-for="(rating, index) of detailFood.ratings" :key="index"
      >
        <div class="time">
          <span class="date">{{rating.rateTime | getDate}}</span>
          {{rating.rateTime | getTime}}
        </div>
        <div class="text-wrapper">
          <span class="iconfont icon-good" v-if="rating.rateType === 0">&#xe60c;</span>
          <span class="iconfont icon-bad" v-else>&#xe6c2;</span>
          {{rating.text}}
        </div>
        <div class="user">
          {{rating.username}}
          <img class="avatar" :src="rating.avatar" />
        </div>
      </li>
    </ul>
    <shop-car></shop-car>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ShopCar from '../store/components/ShopCar'
export default {
  name: 'FoodDetail',
  data () {
    return {
      allNum: 0,
      goodNum: 0,
      badNum: 0
    }
  },
  components: {
    ShopCar
  },
  mounted () {
    this.$nextTick(() => {
      this.detailFood.ratings.forEach(val => {
        if (val.rateType === 0) {
          this.goodNum++
        } else {
          this.badNum++
        }
        this.allNum++
      })
    })
  },
  computed: {
    ...mapState(['detailFood'])
  },
  filters: {
    getDate (date) {
      date = new Date(date)
      return date.toLocaleDateString().split('/').join('-')
    },
    getTime (date) {
      date = new Date(date)
      var hour = date.getHours()
      var minute = date.getMinutes()
      return hour + ':' + minute
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail-wrapper
    font-size .24rem
    color rgb(147, 153, 159)
    padding-bottom 1rem
    & >>> .shop-wrapper
      position fixed
      bottom 0
      left 0
      right 0
    .back-icon
      position fixed
      top .2rem
      left .2rem
      font-size .6rem
      color #ffffff
      font-weight 700
      background-color rgba(0, 0, 0, .6)
      border-radius 50%
    .title
      font-size .28rem
      color rgb(7, 17, 27)
    .avatar
      width 100%
    .header
      padding .36rem
      position relative
      .name
        font-weight 700
      .info-wrapper
        font-size 0
        margin-top .16rem
        .count, .rate
          font-size .2rem
          margin-right .24rem
      .price
        margin-top .36rem
        line-height .48rem
        font-size .20rem
        .new-price
          color rgb(240, 20, 20)
        .old-price
          text-decoration line-through
          font-size .20rem
          margin-right .2rem
          .money
            font-size .2rem
        .money
          font-weight 700
          font-size .28rem
      .shop
        position absolute
        bottom .36rem
        right .36rem
        width 1.48rem
        padding .12rem 0
        color #ffffff
        font-size .2rem
        font-weight 200
        text-align center
        background-color rgb(0, 160, 220)
        border-radius .24rem
    .devide
      height .4rem
      background-color #eeeeee
    .seller-desc
      padding .36rem
      .description
        padding .12rem .16rem 0
        line-height .48rem
        color rgb(77, 85, 93)
        font-weight 200
    .rate
      padding .36rem
      .rate-type
        margin-top .12rem
        padding-top .24rem
        overflow hidden
        font-size 0
        color rgb(77, 85, 93)
        .type-item
          display inline-block
          width 1.4rem
          text-align center
          line-height .64rem
          font-size .26rem
          border-radius .04rem
          margin-right .16rem
          &.all
            background-color rgb(0, 160, 220)
            color #ffffff
          &.good
            background-color rgba(0, 255, 255, .3)
          &.bad
            background-color rgba(77, 85, 93, .2)
          .num
            font-size .2rem
            padding-left .1rem
            font-weight 200
    .ratings
      padding 0 .32rem
      .rating-item
        font-weight 200
        padding .32rem 0
        position relative
        .time
          font-size .2rem
          line-height .24rem
          .date
            margin-right .2rem
        .text-wrapper
          color rgb(7, 17, 27)
          font-weight normal
          line-height .32rem
          margin-top .12rem
          .icon-good
            color rgb(0, 160, 220)
          .icon-bad
            color #dddddd
        .user
          position absolute
          top .32rem
          right 0
          font-size .2rem
          .avatar
            width .24rem
            height .24rem
            border-radius 50%
            vertical-align top
            margin-left .12rem
</style>
